<template>
    <el-row class="tac">
        <el-col :span="12">
            <el-menu default-active="1" 
            class="el-menu-vertical-demo" 
            background-color="#0000ff"
            text-color="rgb(185, 183, 183)"
            active-text-color="#ffff">
                <el-menu-item index="1" @click="clickToHome" class="menu-item">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2" @click="clickToSearch" class="menu-item">
                    <i class="el-icon-document"></i>
                    <span slot="title">检索</span>
                </el-menu-item>
                <el-menu-item index="3" @click="clickToAssess" class="menu-item">
                    <i class="el-icon-setting"></i>
                    <span slot="title">评估</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>


  
  <style lang="less" scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 180px;
      // min-height: 350px;
      border-radius: 15px;
    }
    .menu-item{
      border-radius: 15px;
    }
    .el-menu{
        height: 100vh;
    }
  </style>
  
  <script>
    export default {
      data() {
        return {

        };
      },
      methods:{
        clickToHome(){
          if(!(this.$route.path == '/home' || this.$route.path == '/')){
            this.$router.push("/home");
          }

        },
        clickToSearch(){
          if(this.$route.path != '/search'){
            this.$router.push("/search");
          }

        },
        clickToAssess(){
          if(this.$route.path != '/assess'){
            this.$router.push("/assess");
          }

        }
      }
    }
  </script>